<!-- 公告详情 -->
<template>
  <div class="announcement-detail-container">
    <!-- 标题区 -->
    <div class="detail-header">
      <div class="detail-header-top">
        <div class="detail-header-title">
          <h2>{{ detail.infoTitle }}</h2>
        </div>
        <el-button type="primary" @click="handleBack">返回列表</el-button>
      </div>
      <div class="detail-header-title-info flex-shrink-0">
        <span class="flex-shrink-0">
          <template v-if="category"
            ><span class="c-gray">分类：</span><span>{{ category }} </span></template
          >
          <template v-if="detail?.userName"
            ><span class="ml-20px c-gray">创建人：</span
            ><span>{{ detail.userName }} </span></template
          >
        </span>
        <span v-if="detail.updateTime" class="flex-shrink-0">
          <span class="c-gray">创建时间：</span><span>{{ formatDate(detail.createTime) }} </span>
        </span>
      </div>
    </div>

    <!-- 主体内容区 -->
    <div class="detail-content">
      <!-- 信息内容 -->
      <div class="detail-section" v-if="detail.infoContent">
        <div class="section-label">信息内容</div>
        <div class="content-container">
          <div class="content-text" v-html="detail.infoContent"> </div>
        </div>
      </div>

      <!-- 附件 -->
      <div class="detail-section" v-if="detail.fileUrls?.length">
        <div class="section-label">附件</div>
        <div class="attachments-container">
          <div v-for="(url, index) in detail.fileUrls" :key="index" class="attachment-item">
            <div class="file-info">
              <el-icon class="file-icon"><Document /></el-icon>
              <span class="file-name">{{ getFilenameFromURL(url) }}</span>
            </div>

            <div class="file-actions">
              <el-button type="primary" size="small" plain @click="downloadFile(url)">
                下载
              </el-button>
              <el-button
                v-if="getFileCanView(url)"
                type="success"
                size="small"
                plain
                @click="viewFile(url)"
              >
                查看
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 文件查看对话框 -->
  <FileViewDialog
    v-model="resourceDialogVisible"
    :title="currentResource?.title"
    :src="currentResource?.url"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Document } from '@element-plus/icons-vue'
import { useRouter, useRoute } from 'vue-router'
import { InfoTypeApi, InfoTypeVO } from '@/api/school/infotype'
import { InfoApi, InfoVO } from '@/api/school/info'
import { usePageLoading } from '@/hooks/web/usePageLoading'
import { formatDate } from '@/utils/formatTime'
import download from '@/utils/download'
import { getFilenameFromURL } from '@/utils/index'
import { getFileCanView } from '@/components/FileView/utils'
const router = useRouter()
const route = useRoute()
const { loadStart, loadDone } = usePageLoading()
// 详情数据
const detail = ref<InfoVO>({} as InfoVO)
const category = ref('')

const getDetail = async (id: any) => {
  // 修改时，设置数据
  if (id) {
    loadStart()
    try {
      detail.value = await InfoApi.getInfo(id)
      //查询分类信息
      const infoTypeList = await InfoTypeApi.getInfoTypeSimpleList()
      category.value = infoTypeList.find((item) => item.id === detail.value.typeId)?.typeName
    } finally {
      loadDone()
    }
  }
}
// 文件查看相关
const resourceDialogVisible = ref(false) // 资源弹窗
const currentResource = ref() // 当前资源

const downloadFile = (url: string) => {
  download.file(url)
}

const viewFile = (url: string) => {
  currentResource.value = { url }
  resourceDialogVisible.value = true
}

const handleBack = () => {
  router.push({ path: '/info/info' })
}
watch(
  () => route.query.id,
  (newId) => {
    getDetail(newId)
  },
  {
    immediate: true
  }
)
</script>

<style lang="scss" scoped>
@import url('@/views/school/news/detail.scss');
</style>
